<!DOCTYPE html>
<html>
<head>
    <title>Charge Distribution Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>

<canvas id="physicsCanvas" width="850" height="350"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Parameters ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.textAlign = 'center';

    // --- Define coordinates and scaling ---
    const canvasWidth = canvas.width;
    const canvasHeight = canvas.height;
    const yAxis = canvasHeight / 2 - 30; // Y-coordinate for the horizontal axis
    const unitA = 120; // Pixel representation of 'a'
    const centerX = canvasWidth / 2;

    // --- Draw the axis line ---
    const axisStart = centerX - 2.5 * unitA;
    const axisEnd = centerX + 2.8 * unitA;
    ctx.beginPath();
    ctx.moveTo(axisStart, yAxis);
    ctx.lineTo(axisEnd, yAxis);
    ctx.stroke();

    // --- Draw the arrowhead ---
    const arrowHeadLength = 12;
    const arrowHeadAngle = Math.PI / 6;
    ctx.beginPath();
    ctx.moveTo(axisEnd, yAxis);
    ctx.lineTo(axisEnd - arrowHeadLength * Math.cos(arrowHeadAngle), yAxis - arrowHeadLength * Math.sin(arrowHeadAngle));
    ctx.moveTo(axisEnd, yAxis);
    ctx.lineTo(axisEnd - arrowHeadLength * Math.cos(arrowHeadAngle), yAxis + arrowHeadLength * Math.sin(arrowHeadAngle));
    ctx.stroke();

    // --- Define points and labels ---
    const points = [
        { pos: -2 * unitA, coordLabel: '-2a', chargeLabel: '-8Q' },
        { pos: -1 * unitA, coordLabel: '-a',  chargeLabel: 'Q' },
        { pos: 0,          coordLabel: 'O',   chargeLabel: 'q, m' },
        { pos: 1 * unitA,  coordLabel: 'a',   chargeLabel: 'Q' },
        { pos: 2 * unitA,  coordLabel: '2a',  chargeLabel: '-8Q' }
    ];

    const tickHeight = 6;
    const labelOffset = 15;

    // --- Draw ticks and labels ---
    points.forEach(p => {
        const x = centerX + p.pos;

        // Draw tick mark
        ctx.beginPath();
        ctx.moveTo(x, yAxis - tickHeight);
        ctx.lineTo(x, yAxis + tickHeight);
        ctx.stroke();

        // --- Draw Labels ---
        // Set font for math symbols (italic)
        ctx.font = 'italic 28px "Times New Roman"';
        
        // Draw charge label (above)
        ctx.textBaseline = 'bottom';
        ctx.fillText(p.chargeLabel, x, yAxis - tickHeight - labelOffset / 2);

        // Draw coordinate label (below)
        ctx.textBaseline = 'top';
        // The label 'O' is not italic.
        if (p.coordLabel === 'O') {
            ctx.font = '28px "Times New Roman"'; // Non-italic for 'O'
        }
        ctx.fillText(p.coordLabel, x, yAxis + tickHeight + labelOffset / 2);
    });

    // --- Draw the caption ---
    ctx.font = '24px "KaiTi", "SimSun"'; // Use KaiTi font for Chinese, with SimSun as fallback
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('电图 1.3.1', canvasWidth / 2, yAxis + 100);

</script>

</body>
</html>